<template>
  <el-carousel height="480px" indicator-position="none">
    <el-carousel-item v-for="item in carouselItem" :key="item.text">
      <div style="width: 100%; height: 100%">
        <el-image
          fit="cover"
          :src="item.picpath"
          style="width: 100%; height: 100%"
        ></el-image>
      </div>
    </el-carousel-item>
  </el-carousel>

  <div class="contnetbox">
    <div class="tagdiv">课程中心</div>
    <div class="listdiv">
      <div
        class="listitem"
        v-for="item in courseData"
        @click="gotoDetail(item)"
      >
        <div class="imgdiv">
          <img :src="item.cover" alt="" />
        </div>
        <p class="titlep">{{ item.courseName }}</p>
        <p class="textp">
          {{ item.CourseDes }}
        </p>
      </div>
    </div>
  </div>

  <div class="contentmiddle">
    <div class="innerbox">
      <div class="firstdiv commondiv">
        <div class="gtag">专业简介</div>
        <div class="bgdiv">
          {{ profileData.proProfile }}
        </div>
      </div>
      <div class="commondiv">
        <div class="gtag">统计信息</div>
        <div class="box">
          <div class="divcc">
            <img src="../assets/oneicon.png" alt="" />
            <div>
              <p class="number">
                {{ allNumber.course + allNumber.coursePersonCount }}
              </p>
              <p class="ntext">课程 (门)</p>
            </div>
          </div>
          <div class="divcc">
            <img src="../assets/icon2.png" alt="" />
            <div>
              <p class="number">{{ allNumber.smallcourse }}</p>
              <p class="ntext">微课 (门)</p>
            </div>
          </div>
          <div class="divcc">
            <img src="../assets/icon3.png" alt="" />
            <div>
              <p class="number">{{ allNumber.material }}</p>
              <p class="ntext">素材 (条)</p>
            </div>
          </div>
          <div class="divcc">
            <img src="../assets/icon4.png" alt="" />
            <div>
              <p class="number">{{ allNumber.people }}</p>
              <p class="ntext">学员 (人)</p>
            </div>
          </div>
        </div>
      </div>

      <div class="commondiv three">
        <div class="gtag">用户类型</div>
        <div class="box">
          <div class="divcc">
            <img src="../assets/icon5.png" alt="" />
            <div>
              <p class="number">教师用户</p>
              <p class="ntext">整合教学资源，在线拓展教学项目课程</p>
            </div>
          </div>
          <div class="divcc">
            <img src="../assets/icon6.png" alt="" />
            <div>
              <p class="number">学生用户</p>
              <p class="ntext">在线自学导师，提升专业能力和职业素养</p>
            </div>
          </div>
          <div class="divcc">
            <img src="../assets/icon7.png" alt="" />
            <div>
              <p class="number">企业用户</p>
              <p class="ntext">核心技能平台，全面知识扩展和定制需求</p>
            </div>
          </div>
          <div class="divcc">
            <img src="../assets/icon8.png" alt="" />
            <div>
              <p class="number">社会学习者</p>
              <p class="ntext">掌握时尚学籍信息，引领行业发展</p>
            </div>
          </div>
        </div>
      </div>

      <div class="commondiv">
        <div class="gtag">行业资讯</div>
        <div class="bgdiv">
          <p class="lip" v-for="item in newsList">
            {{ item.title }}
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- <div class="graphbox">
    <div class="tagdiv">知识图谱</div>
    <div class="graphBox">
      <RelationGraph :options="options" ref="relationGraph">
        <template #node="{ node }">
          <div
            :id="'node' + node.id"
            class="nodecss"
            :class="{
              flag1: node.data.flag == 1,
              flag2: node.data.flag == 2,
              flag3: node.data.flag == 3,
            }"
          >
            {{ node.text }}
          </div>
        </template>
      </RelationGraph>
    </div>
  </div> -->
</template>

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import RelationGraph from 'relation-graph/vue3'
import {
  getSlides,
  getCourse,
  proProfile,
  getAllCount,
  getNewsList,
  knowledgelist,
} from '@/api/api.js'
import { useRouter } from 'vue-router'
const router = useRouter()
let listData = ref([])
let courseData = ref([])
let carouselItem = ref([])
let allNumber = ref({})
let newsList = ref([])
const options = {
  // defaultExpandHolderPosition: 'right',
  // defaultLineShape: 4,
  moveToCenterWhenRefresh: !0,
  disableLineClickEffect: !0,
  allowSwitchLineShape: !0,
  allowSwitchJunctionPoint: !0,
  allowShowRefreshButton: !0,
  disableZoom: !1,
  allowShowZoomMenu: !0,
  allowShowDownloadButton: !1,
  defaultLineShape: 1,
  defaultNodeBorderWidth: 0,
  defaultLineColor: '#F75A00',
  layouts: [
    {
      label: '知识图谱',
      layoutName: 'center',
      layoutClassName: 'seeks-layout-center',
      defaultNodeBorderWidth: 0,
      defaultNodeWidth: 40,
      defaultNodeHeight: 40,
      defaultNodeColor: '#42D9A3',
      distance_coefficient: 1,
    },
  ],
  defaultJunctionPoint: 'border',
}
const relationGraph = ref()
const allNodeSelect = ref([])
const rootId = ref('')

const profileData = ref({})
onMounted(() => {
  getSlides({ projectId: '2utrackwo41egqxjetrgja' }).then((res) => {
    carouselItem.value = JSON.parse(res.list).obj
  })
  getCourse({
    projectId: '2utrackwo41egqxjetrgja',
    coursetype: 1,
    pagesize: 6,
  }).then((res) => {
    courseData.value = JSON.parse(res.list).obj
  })
  proProfile({ projectId: '2utrackwo41egqxjetrgja' }).then((res) => {
    profileData.value = res
  })
  getAllCount({ projectId: '2utrackwo41egqxjetrgja' }).then((res) => {
    allNumber.value = res
  })

  getNewsList({
    projectGroupId: '2utrackwo41egqxjetrgja',
    typeId: '',
    pageNum: 1,
    pageSize: 6,
  }).then((res) => {
    newsList.value = res.rows
  })
  // knowledgelist({
  //   proId: '2utrackwo41egqxjetrgja',
  // }).then((res) => {
  //   convertData(res)
  // })
  // const graphJsonData = {
  //   rootId: 'N3',
  //   nodes: [
  //     { id: 'N4', text: '十4' },
  //     { id: 'N5', text: '十5' },
  //     { id: 'N6', text: '十6' },
  //     { id: 'N7', text: '十7' },
  //     { id: 'N3', text: '十三' },
  //     { id: 'N9', text: '152****3393' },
  //   ],
  //   lines: [
  //     { from: 'N3', to: 'N9', text: '分享' },
  //     { from: 'N3', to: 'N4', text: '分享444' },
  //     { from: 'N3', to: 'N5', text: '分享555' },
  //     { from: 'N3', to: 'N6', text: '分享666' },
  //     { from: 'N3', to: 'N7', text: '分享777' },
  //     { from: 'N9', to: 'N4', text: '分享x' },
  //   ],
  // }
  // console.log(relationGraph.value)
  // relationGraph.value.setJsonData(graphJsonData, () => {
  //   console.log('relationGraph ready!')
  // })
})

const mapToFlag = {
  资源库: '1',
  专业: '2',
  课程: '3',
}
const colorToValue = {
  资源库: '#145FDF',
  专业: '#80B0FF',
  课程: '#42D9A3',
}

const sizeToValue = {
  资源库: '80',
  专业: '60',
  课程: '40',
}

const convertData = (res) => {
  const lines = []
  res.edges.forEach((item) => {
    lines.push({
      from: item.startId,
      to: item.endId,
    })
  })
  res.nodes.forEach((item) => {
    item.text = item.name
    item.data = {
      flag: mapToFlag[item.category],
      childrenNum: item.nodeCount,
    }
    item.width = sizeToValue[item.category]
    item.height = sizeToValue[item.category]
    item.color = colorToValue[item.category]
  })
  rootId.value = res.nodes[0].id
  const graphJsonData = {
    rootId: res.nodes[0].id,
    nodes: res.nodes,
    lines: lines,
  }
  relationGraph.value.setJsonData(graphJsonData, () => {
    allNodeSelect.value = relationGraph.value.getInstance().getNodes()
    // setNodeLable()
  })
}
const setNodeLable = () => {
  const rootNode = allNodeSelect.value.filter(function (t) {
    return t.id == rootId.value
  })[0]
  allNodeSelect.value.forEach((item) => {
    // 计算坐标差值
    const deltaX = rootNode.x - item.x
    const deltaY = rootNode.y - item.y

    // 获取节点引用
    const nodeRef = document.getElementById(`node${item.id}`)

    // 设置基础位置样式
    let right, left, bottom
    if (item.flag > 1) {
      right = deltaX > 0 ? '50px' : null
      left = deltaX < 0 ? '50px' : null
      bottom = deltaY > 0 ? '30px' : '0px'
    } else {
      right = deltaX > 0 ? '70px' : null
      left = deltaX < 0 ? '70px' : null
      bottom = deltaY > 0 ? '40px' : '0px'
    }

    // 设置transform样式
    let transformOrigin, rotationAngle
    if (deltaY > 0 && deltaX > 0) {
      transformOrigin = 'right bottom'
      rotationAngle =
        ((deltaY * deltaY) / (deltaX * deltaX + deltaY * deltaY)) * 30
    } else if (deltaY < 0 && deltaX > 0) {
      transformOrigin = 'right top'
      rotationAngle =
        ((deltaY * deltaY) / (deltaX * deltaX + deltaY * deltaY)) * -30
    } else if (deltaY > 0 && deltaX < 0) {
      transformOrigin = 'left bottom'
      rotationAngle =
        ((deltaY * deltaY) / (deltaX * deltaX + deltaY * deltaY)) * -30
    } else if (deltaY < 0 && deltaX < 0) {
      transformOrigin = 'left top'
      rotationAngle =
        ((deltaY * deltaY) / (deltaX * deltaX + deltaY * deltaY)) * 30
    }

    // 应用样式
    nodeRef.style.right = right
    nodeRef.style.left = left
    nodeRef.style.bottom = bottom
    nodeRef.style.transformOrigin = transformOrigin
    nodeRef.style.transform = rotationAngle ? `rotate(${rotationAngle}deg)` : ''
  })

  console.log(rootNode)
}
const gotoDetail = (item) => {
  window.open(`https://zyk.icve.com.cn/courseDetailed?id=${item.id}`)
}
</script>



<style lang="scss" scoped>
.nodecircle {
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  font-size: 28px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nodecss {
  color: rgb(0, 0, 0);
  position: absolute;
  margin-top: 5px;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  white-space: nowrap;
  margin-left: -110px;
  top: 90px;
  width: 300px;
}
.flag1 {
  margin-left: -110px;
  top: 90px;
}
.flag3 {
  margin-left: -127px;
  top: 42px;
}
.flag2 {
  margin-left: -120px;
  top: 60px;
}
.graphBox {
  height: 800px;
}
.graphbox {
  width: 1280px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 40px;
}
.lip {
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lip::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background-color: #e1b221;
  position: absolute;
  left: 0;
  top: 14px;
  border-radius: 50%;
}
.three {
  margin-right: 20px;
}
.ntext {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  width: 180px;
}
.number {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
}
.divcc {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px 4px 4px 4px;
  img {
    margin-right: 20px;
  }
}
.box {
  display: grid;
  grid-template-columns: repeat(2, 306px);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  width: 100%;
  height: 344px;
}
.bgdiv {
  width: 630px;
  height: 344px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px 4px 4px 4px;
  box-sizing: border-box;
  padding: 20px 20px 52px 20px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  line-height: 34px;
  text-align: justify;
}
.gtag {
  height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: url('../assets/gtag.png') no-repeat;
  padding-left: 16px;
  line-height: 40px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 20px;
}
.firstdiv {
  width: 630px;
  height: 404px;
  margin-right: 20px;
}
.commondiv {
  width: 630px;
  height: 404px;
  margin-bottom: 60px;
}
.contentmiddle {
  height: 988px;
  background: url('../assets/cbg.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 81px;
  box-sizing: border-box;
  padding-top: 60px;
}
.innerbox {
  display: flex;
  width: 1280px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.textp {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}
.titlep {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
}
.imgdiv {
  width: 413px;
  height: 232px;
  border-radius: 4px 4px 4px 4px;
  overflow: hidden;
  margin-bottom: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
.listdiv {
  display: flex;
  flex-wrap: wrap;
}
.listitem {
  height: 310px;
  width: 413px;
  margin-right: 20px;
  cursor: pointer;
}
.listitem:nth-child(3n) {
  margin-right: 0;
}
.tagdiv {
  width: 128px;
  height: 40px;
  background: url('../assets/tag.png') no-repeat;
  line-height: 40px;
  padding-left: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 20px;
}
.contnetbox {
  width: 1280px;
  margin: 0 auto;
  margin-top: 60px;
}
.container {
  padding: 0 3rem;
  h2 {
    font-size: 20px;
    color: #000;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .course-content {
    padding: 5px 10px;
    height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    h3 {
      font-size: 16px;
      color: #303030;
      text-transform: uppercase;
      font-weight: 600;
      font-family: 'Open Sans', sans-serif;
      margin-bottom: 10px;
    }
  }
}

.el-carousel__item h3 {
  text-shadow: 0 0 3px #303030;
  color: #fff;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 58px;
  font-weight: 800;
  line-height: 64px;
}

.el-carousel__item {
  background: repeating-linear-gradient(to right, #9099a2, #6d7993, #96858f);
}

.about-content {
  h2 {
    font-size: 35px;
    color: #303030;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin-top: 100px;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  p {
    font-size: 18px;
    color: #606060;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 15px;
  }

  div p {
    font-size: 20px;
    color: #6d7993;
    font-family: 'Open Sans', serif;
  }
}

.single-service {
  margin-bottom: 2rem;
  padding: 30px 20px 30px 20px;
  box-shadow: 0 0 12px 0 #e9e9e9;
  h3 {
    font-size: 20px;
    color: #303030;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 12px;
  }
  p {
    font-size: 14px;
    color: #606060;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 0px;
  }
}

.about-img {
  position: relative;
  z-index: 1;
  padding: 0 20px;
  padding-top: 60px;
}
.about-img:after {
  position: absolute;
  border: 10px solid #ebebeb;
  left: 0;
  bottom: -5px;
  content: '';
  width: 100%;
  height: 76%;
  z-index: -1;
}
#app {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentTitle {
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}
</style>